<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年份" prop="contractYear">
        <el-date-picker
          v-model="queryParams.contractYear"
          type="year"
          placeholder="选择年"
          format="yyyy年"
          value-format="yyyy"
        />
      </el-form-item>
      <el-form-item label="客户" prop="customerId">
        <el-select
          v-model="queryParams.customerId"
          placeholder="请选择客户"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in customerIdOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物料名称"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" size="small" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="季度统计" name="first">
        <el-table v-loading="loading" :data="quarterList">
          <el-table-column label="季度" align="center" prop="contractQuarter" />
          <el-table-column label="物料名称" align="center" prop="materialName" />
          <el-table-column label="已收金额" align="center" prop="incomeAmount" />
          <el-table-column label="退款金额" align="center" prop="returnAmount" />
          <el-table-column label="订货数量" align="center" prop="saleNum" />
          <el-table-column label="发货数量" align="center" prop="deliveryNum" />
          <el-table-column label="退货数量" align="center" prop="returnNum" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="月份统计" name="second">
        <el-table v-loading="loading" :data="monthList"></el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getQueryData } from '@/api/query/comQuery'
import { monthReport, quarterReport } from '@/api/saleReport/contractDeliveryReturnReport'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

const activeName = ref('first')
const currentYear = ref(new Date().getFullYear().toString())
const loading = ref(true)
const showSearch = ref(true)
const monthList = ref([])
const quarterList = ref([])
const customerIdOptions = ref([])

const queryParams = reactive({
  customerId: null,
  contractYear: currentYear.value,
  contractQuarter: null,
  materialId: null,
  materialName: null
})

onMounted(() => {
  getList()
  fetchCustomerOptions()
})

const fetchCustomerOptions = async () => {
  try {
    const res = await getQueryData("query_customer", {})
    customerIdOptions.value = res.data
  } catch (error) {
    ElMessage.error('获取客户选项失败')
  }
}

const getList = async () => {
  try {
    loading.value = true
    const [monthRes, quarterRes] = await Promise.all([
      monthReport(queryParams),
      quarterReport(queryParams)
    ])
    monthList.value = monthRes.rows
    quarterList.value = quarterRes.rows
  } catch (error) {
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  getList()
}

const resetQuery = () => {
  proxy.resetForm('queryForm')
  queryParams.contractYear = currentYear.value
  handleQuery()
}
</script>
